<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统示意图 - 智感桥安</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <h2>智感桥安</h2>
                <span>道路光纤监测系统</span>
            </div>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="index.html" class="nav-link">首页</a>
                </li>
                <li class="nav-item active">
                    <a href="diagram.html" class="nav-link">系统示意图</a>
                </li>
                <li class="nav-item">
                    <a href="metrics.html" class="nav-link">性能指标</a>
                </li>
                <li class="nav-item">
                    <a href="control.html" class="nav-link">控制面板</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <h1>系统架构示意图</h1>
            <p class="section-description">展示道路光纤监测系统的整体架构与数据流向</p>
            
            <div class="diagram-container">
                <div class="system-diagram">
                    <!-- 系统架构图使用SVG -->
                    <svg viewBox="0 0 800 500" class="architecture-svg">
                        <!-- 桥梁 -->
                        <rect x="50" y="200" width="700" height="30" fill="#8B7355" stroke="#5D4037" stroke-width="2"/>
                        
                        <!-- 光纤传感器 -->
                        <g class="sensors">
                            <circle cx="100" cy="215" r="8" fill="#4CAF50" class="sensor" data-id="1"/>
                            <circle cx="200" cy="215" r="8" fill="#4CAF50" class="sensor" data-id="2"/>
                            <circle cx="300" cy="215" r="8" fill="#4CAF50" class="sensor" data-id="3"/>
                            <circle cx="400" cy="215" r="8" fill="#4CAF50" class="sensor" data-id="4"/>
                            <circle cx="500" cy="215" r="8" fill="#4CAF50" class="sensor" data-id="5"/>
                            <circle cx="600" cy="215" r="8" fill="#4CAF50" class="sensor" data-id="6"/>
                            <circle cx="700" cy="215" r="8" fill="#4CAF50" class="sensor" data-id="7"/>
                        </g>
                        
                        <!-- 数据流 -->
                        <g class="data-flow">
                            <path d="M100,215 L100,100 L200,100 L200,215" stroke="#2196F3" stroke-width="2" fill="none" stroke-dasharray="5,5"/>
                            <path d="M300,215 L300,100 L400,100 L400,215" stroke="#2196F3" stroke-width="2" fill="none" stroke-dasharray="5,5"/>
                            <path d="M500,215 L500,100 L600,100 L600,215" stroke="#2196F3" stroke-width="2" fill="none" stroke-dasharray="5,5"/>
                            <path d="M700,215 L700,100 L600,100" stroke="#2196F3" stroke-width="2" fill="none" stroke-dasharray="5,5"/>
                        </g>
                        
                        <!-- 数据处理中心 -->
                        <rect x="250" y="50" width="300" height="40" fill="#3F51B5" stroke="#303F9F" stroke-width="2"/>
                        <text x="400" y="75" text-anchor="middle" fill="white" font-weight="bold">AI数据处理中心</text>
                        
                        <!-- 数据流向箭头 -->
                        <polygon points="600,70 620,70 610,60" fill="#2196F3"/>
                        
                        <!-- 控制中心 -->
                        <rect x="620" y="30" width="150" height="80" fill="#FF9800" stroke="#F57C00" stroke-width="2"/>
                        <text x="695" y="55" text-anchor="middle" fill="white" font-weight="bold">控制中心</text>
                        <text x="695" y="75" text-anchor="middle" fill="white">预警与响应</text>
                        
                        <!-- 图例 -->
                        <rect x="50" y="300" width="200" height="150" fill="#f5f5f5" stroke="#ddd" stroke-width="1"/>
                        <text x="150" y="325" text-anchor="middle" font-weight="bold">图例</text>
                        
                        <circle cx="70" y="350" r="8" fill="#4CAF50"/>
                        <text x="90" y="355">光纤传感器</text>
                        
                        <path d="M70,380 L90,380" stroke="#2196F3" stroke-width="2" stroke-dasharray="5,5"/>
                        <text x="90" y="385">数据流</text>
                        
                        <rect x="62" y="400" width="16" height="16" fill="#3F51B5"/>
                        <text x="90" y="415">数据处理中心</text>
                        
                        <rect x="62" y="430" width="16" height="16" fill="#FF9800"/>
                        <text x="90" y="445">控制中心</text>
                    </svg>
                </div>
                
                <div class="sensor-info">
                    <h3>传感器状态</h3>
                    <div id="sensor-status">
                        <!-- 传感器状态将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
            
            <div class="system-description">
                <h2>系统工作流程</h2>
                <ol>
                    <li>光纤传感器实时采集桥梁结构数据（应力、位移、振动等）</li>
                    <li>采集的数据通过5G网络传输至AI数据处理中心</li>
                    <li>AI算法对数据进行分析处理，评估桥梁健康状态</li>
                    <li>分析结果发送至控制中心，生成预警与响应指令</li>
                    <li>系统联动路侧设备，实现车路协同安全防护</li>
                </ol>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 长安大学 - 智感桥安项目组. 版权所有.</p>
        </div>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>